import React, { Component } from 'react'

export default class Count extends Component {
  // constructor() {
  // super()
  // this.属性 = 值
  // 构造器的this一定是当前组件实例
  // this.count = 0 // 这个只能说是组件的私有数据,不是状态
  // this.state = {
  //   count: 0,
  //   msg: 'hello state',
  // } //这个才是组件状态

  // handle加到了实例上(缺点: 每一个Count实例都创建了一个handle函数)
  // this.handle = () => {
  //   this.setState({
  //     count: this.state.count + 1,
  //   })
  // }
  // }

  state = {
    count: 0,
    msg: 'hello state',
  }

  // handle是加到实例上的.是es7中新增语法: 类的实例方法
  // 相当于就是构造器中this.handle = () => {}的简写
  // handle = () => {
  //   this.setState({
  //     count: this.state.count + 1,
  //   })
  // }

  // handle加到了原型上
  handle() {
    this.setState({
      count: this.state.count + 1,
    })
  }

  render() {
    // console.log('render执行了')
    // render函数中的this也一定是当前组件实例
    // 定义在render中可以分离事件处理函数和jsx.但是handle函数的创建次数会很多
    // const handle = () => {
    //   this.setState({
    //     count: this.state.count + 1,
    //   })
    // }
    return (
      <div>
        <p id="c">{this.state.count}</p>
        <p>{this.state.msg}</p>
        <button
          onClick={() => {
            this.handle()
          }}
        >
          +
        </button>
      </div>
    )
  }
}
